<template layout="Layout.vue">
    <div class="layout">
        <div class="back" @click="goBack()">
            <p>返回</p>
        </div>
        <div class="province"></div>
    </div>


</template>
<script setup>
import { onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import * as echarts from 'echarts'

let $router = useRouter()
let $route = useRoute()
let ename = $route.query.ename
let name = $route.query.name

const provincesJson = (ename) => {
    return import(`@/map/json/provinces/${ename}.json`);
}

const provincesJs = (ename) => {
    return import(`@/map/js/provinces/${ename}.js`);
}

const initDate = async () => {
    let provincesJsonData = await provincesJson(ename);
    let provincesJsData = await provincesJs(ename);
    let myChart = echarts.init(document.querySelector('.province'))
    echarts.registerMap(ename, provincesJsonData.default)
    let option = {
        title: {
            show: true,
            text: '',
            left: 'center',
            top: 'top',
            textStyle: {
                fontSize: 14,
                fontWeight: 300,
                color: '#28414a'
            }
        },
        tooltip: {},
        // 视觉映射组件
        visualMap: {
            min: 0,
            max: 18,
            left: 'left',
            top: 'bottom',
            text: ['多', '少'],
            inRange: {
                color: ['#cbe2e4', '#597e82']
            },
            show: true
        },
        // 地理坐标系组件
        geo: {
            map: '',
            // 开启缩放和平移
            roam: true,
            zoom: 1.2,
            label: {
                normal: {
                    show: true,
                    fontSize: 10,
                    color: '#28414a'
                }
            },
            itemStyle: {
                normal: {
                    borderColor: 'rgba(0, 0, 0, 0.2)'
                },
                emphasis: {
                    areaColor: '#daf3ef',
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 30,
                    borderWidth: 0,
                    shadowColor: '#28414a'
                }
            }
        },
        series: [
            {
                type: 'map',
                geoIndex: 0,
                data: provincesJsData.default
            }
        ]
    }
    option.title.text = name
    option.geo.map = ename
    myChart.setOption(option)
    myChart.on('click', function (params) {
        $router.push({
            path: '/shelterForm',
            query: { adcode: params.data.adcode, name: params.data.name }
        })
    })
}

const goBack = () => {
    $router.go(-1)
}

onMounted(() => {
    initDate()
})
</script>
<style scoped lang="scss">
.layout {
    width: 100%;
    height: 100%;

    .back {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;

        p {
            margin-left: 20px;
        }
    }

    .province {
        width: 100%;
        height: calc(100% - 60px);
    }
}
</style>